<template>
	<div class="user">
		<!--用户数据  -->
		<div class="user-data">
			<div class="user-dataUp">
					 <router-view></router-view> 
					 <router-link to="/userData"> 
						<img src="../../static/img5/headImage.jpg" class="headImg"/>
					 </router-link> 
					 <router-link to="/userData"> 
						<p>186****2500</p>
						<p>
							<a class="a1">账户管理、收货地址</a>
						</p>
					 </router-link> 
			</div>
			<div class="user-dataDown">
				<!--收藏及松鼠币按钮  -->
				<div class="user-button">
						
						<button class="user-collect">
							<p>{{collectCount}}</p>
							<router-link to="/userCollect">
							<p>我的收藏夹</p>
							</router-link>
						</button>
						
					<button class="user-coin">
						<p>
							<i>40</i>
							<span></span>
						</p>
						<router-link to="/IntegralData">
						<p>我的松鼠币</p>
						</router-link>
					</button>
				</div>
			</div>
		</div>
		<!--我的订单  -->
		<router-link :to="{path:'/userOrder',query:{type:'all'}}">
			<div class="user-order">
				<i></i>
				<span>我的订单</span>
				<span>查看全部订单</span>
				<i></i>
			</div>
		</router-link>
		
		<!--按钮列表  -->
		<div class="user-button-list">
			<router-link :to="{path:'/userOrder',query:{type:'pay'}}" tag="span">
				待付款
			</router-link> 
			<router-link :to="{path:'/userOrder',query:{type:'send'}}" tag="span">
				待发货
			</router-link> 
			<router-link :to="{path:'/userOrder',query:{type:'receive'}}" tag="span">
				待收货
			</router-link> 
			<router-link :to="{path:'/userOrder',query:{type:'comment'}}" tag="span">
				待评价
			</router-link> 
			<router-link to="/userOrder" tag="span">
				退款/售后
            </router-link> 
		</div>
		<!--其他列表  -->
		<div class="user-other-list">
			<router-link to="/userCoupon">
			<div class="user-other-coupon">
				<i></i>
				<span>我的优惠券</span>
				<span>0 张</span>
				<i></i>
			</div>
			</router-link>
			<router-link to="/userRecommend">
			<div class="user-other-recommend">
				<i></i>
				<span>推荐有奖</span>
				<i></i>
			</div>
			</router-link>
			<div class="user-other-online">
				<i></i>
				<span>在线客服</span>
				<i></i>
			</div>
			<router-link to="/userHelp">
			<div class="user-other-help">
				<i></i>
				<span>帮助与反馈</span>
				<i></i>
			</div>
			</router-link>
				<router-link to="/userSet">
				<div class="user-other-setting">
					<i></i>
					<span>设置</span>
					<span>关于我们</span>				
					<i></i>
				</div>
				</router-link>
		</div>
	</div>
</template>

<script>

export default {
	data:function(){
		return {
			btnClass:true
		}
	},
	computed:{
		collectCount(){
			return this.$store.state.favoriteList.length;
		}
	}
}
</script>

<style scoped>
@import "../../static/css/base.css";

.user {
	width: 100%;
	height: 100vh;
}

.user-data {
	width: 100%;
	height: 4rem;
	background: url(../../static/img5/user-bg1.png) no-repeat center center;
	background-size: cover;
	padding-top: 0.95rem;
	position: relative; 
}

.user-dataUp {
	width: 100%;
	text-align: center;
}

.user-dataUp .headImg {
	width: 18%;
	height: 18%;
	border-radius: 50%;
}

.user-dataUp p {
	color: white;
	font-size: 0.225rem;
}
.user-dataUp p:last-of-type{
	margin-top: 0.05rem; 
}
.user-dataUp .a1 {
	color: white;
	padding-right:.4rem;
	background: url(../../static/img5/icon1.png) no-repeat right center;
	background-size: 10%;
}

.user-dataDown {
	position: absolute;
	bottom:0rem;
	left: 0;
	width: 100%;
}

 .user-button {
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.user-collect,.user-coin{
	color: white;
	background: rgba(0, 0, 0, 0.3);
	width: 50%;
	height: .7rem;
	outline: none;
	border: none;
}
/* .btnClass{
	background: rgba(0, 0, 0, 0.3);
} */

.user-collect>p,
.user-coin>p {
	font-style: bold;
	font-size: .22rem;
}
.user-collect a{
	color: #fff;
}
.user-line {
	width: 1px;
}

.user-coin {
	border-left: 1px solid white;
}
.user-coin a{
	color: #fff;
}
.user-coin p i {
	padding-left: .2rem;
	font-style: normal;
	background: url(../../static/img5/icon-nut.png) no-repeat left center;
	background-size: 40%;
}

.user-order {
	width: 100%;
	height: .8rem;
	line-height: .8rem;
	display: flex;
	flex-wrap: nowrap;
	align-content: center;
	border-bottom: 1px solid rgb(200,200,200);
}

.user-order>i:first-of-type {
	display: inline-block;
	width: .8rem;
	height: .8rem;
	background: url(../../static/img5/icon-order.png) no-repeat .16rem center;
	background-size: 50%;
}

.user-order>span {
	display: inline-block;
	font-size: .22rem;
}

.user-order>span:first-of-type {
	margin-right: 38%;
}

.user-order>i:last-of-type {
	display: inline-block;
	width: .4rem;
	height: .8rem;
	background: url(../../static/img5/icon-arrow.png) no-repeat center center;
	background-size: 50%;
	color: gray;
}

.user-button-list{
	width: 100%;
	height: 1rem;
	display: flex;
	align-items: center;
	justify-content: space-around;
	border-bottom:5px solid rgb(248,248,248);
}

.user-button-list span{
	font-size: .22rem;
	padding-top:.4rem;
	color:#aaa;
}

.user-button-list span:first-of-type{
	background: url(../../static/img5/icon-wallet.png) no-repeat center .05rem;
	background-size: 55%;
}

.user-button-list span:nth-of-type(2){
	background: url(../../static/img5/icon-send.png) no-repeat center .05rem;
	background-size: 55%;
}

.user-button-list span:nth-of-type(3){
	background: url(../../static/img5/icon-receive.png) no-repeat center .05rem;
	background-size: 55%;
}

.user-button-list span:nth-of-type(4){
	background: url(../../static/img5/icon-comment.png) no-repeat center .03rem;
	background-size: 50%;
}

.user-button-list span:last-of-type{
	background: url(../../static/img5/icon-after-sale.png) no-repeat center .03rem;
	background-size: 35%;
}
.user-other-list{
	padding-left:0.1rem;
}
.user-other-coupon,
.user-other-recommend,
.user-other-online,
.user-other-help,
.user-other-setting{
	width: 100%;
	height: .68rem;	
	background-size:cover;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
}

.user-other-coupon{
	border-bottom:1px solid rgb(200,200,200);
}

.user-other-coupon>i:first-of-type,
.user-other-recommend>i:first-of-type,
.user-other-online>i:first-of-type,
.user-other-help>i:first-of-type,
.user-other-setting>i:first-of-type{
	display: inline-block;
	width: .64rem;
	height: .7rem;
}

.user-other-coupon>i:first-of-type {
	background: url(../../static/img5/icon-coupon.png) no-repeat 0.05rem center;
	background-size: 60%;
}

.user-other-coupon>span,
.user-other-recommend>span,
.user-other-online>span,
.user-other-help>span,
.user-other-setting>span{
	display: inline-block;
	font-size: .23rem;
}

.user-other-coupon>span:first-of-type {
	margin-right: 50%;
}

.user-other-coupon>span:last-of-type {
	color:#aaa;
}

.user-other-coupon>i:last-of-type,
.user-other-recommend>i:last-of-type,
.user-other-online>i:last-of-type,
.user-other-help>i:last-of-type,
.user-other-setting>i:last-of-type{
	display: inline-block;
	width: .4rem;
	height: .7rem;
	color: gray;
}
.user-other-coupon>i:last-of-type {
	background: url(../../static/img5/icon-arrow.png) no-repeat center center;
	background-size: 50%;
}
.user-other-recommend {
	border-bottom:4px solid rgb(248,248,248);
}

.user-other-recommend>i:first-of-type {
	background: url(../../static/img5/icon-recommend.png) no-repeat 0.05rem center;
	background-size: 60%;
}

.user-other-recommend>span:first-of-type {
	margin-right: 62%;
}

.user-other-recommend>i:last-of-type {
	background: url(../../static/img5/icon-arrow.png) no-repeat center center;
	background-size: 50%;
}
.user-other-online {
	border-bottom:.5px solid #ccc;
}

.user-other-online>i:first-of-type {
	background: url(../../static/img5/icon-online.png) no-repeat 0.05rem center;
	background-size: 50%;
}

.user-other-online>span:first-of-type {
	margin-right: 62%;
}

.user-other-online>i:last-of-type {
	background: url(../../static/img5/icon-arrow.png) no-repeat center center;
	background-size: 50%;
}

.user-other-help {
	border-bottom:1px solid rgb(200,200,200);
}

.user-other-help>i:first-of-type {
	background: url(../../static/img5/icon-help.png) no-repeat 0.05rem center;
	background-size: 50%;
}

.user-other-help>span:first-of-type {
	margin-right: 58%;
}

.user-other-help>i:last-of-type {
	background: url(../../static/img5/icon-arrow.png) no-repeat center center;
	background-size: 50%;
}

.user-other-setting>i:first-of-type {
	background: url(../../static/img5/icon-setting.png) no-repeat 0.05rem center;
	background-size: 50%;
}

.user-other-setting>span:first-of-type {
	margin-right: 53%;
}

.user-other-setting>span:last-of-type {
	color:#aaa;
}

.user-other-setting>i:last-of-type {
	background: url(../../static/img5/icon-arrow.png) no-repeat center center;
	background-size: 50%;
} 
</style>